<template>
	<view class="category">
		<!-- 搜索部分 -->
		<view class="header">
			<view class="search">
				商品搜索
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<view class="left">
				<scroll-view scroll-y="true" class="navSrooll">
					<view class="navItem":class="{active:chek===item.id}" @click="chekItem(item.id)" v-for="item in categoryDatas" :key="item.id">
						{{item.name}}
					</view>
				</scroll-view>
				
			</view>
			<view class="right" v-if="cateObj">
				<scroll-view scroll-y="true" class="contentSrooll">
					<image class="contentImg" :src="cateObj.imgUrl" mode=""></image>
					<view class="goodsList">
						<view class="goodsItem"  v-for="item in  cateObj.subCateList" :key="item.id">
							<image class="goodsImg" :src="item.wapBannerUrl" mode=""></image>
							<view class="goodsName">{{item.name}}</view>
					  </view>
					</view>
				</scroll-view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import request from '../../utils/request';
	export default {
		data() {
			return {
				categoryDatas:[],
				chek:-1
			};
		},
		mounted(){
			this.getCategory()
		},
		methods:{
			async getCategory(){
				const res=await request('/getCategoryDatas');
				this.categoryDatas=res.categoryDatas
			},
			chekItem(id){
				this.chek=id
			}
		},
		computed:{
			cateObj(){
				return this.categoryDatas.find(item=>item.id===(this.chek===-1? 1005000:this.chek))         //this.chek)
			}
		}
	}
</script>

<style lang="stylus">
.category
	.header
		padding: 10rpx 0
		.search
			width: 90%
			margin: 0 auto
			height: 60rpx
			line-height: 60rpx
			font-size: 30rpx
			text-align: center
			background-color: #ddd
			border-radius: 4rpx
	.content
		display: flex
		height: calc(100vh - 102rpx)
		border-top: 2rpx solid #333
		.left
			width: 20%
			height: 100%
			border-right: 2rpx solid #333
			.navSrooll
				height: calc(100vh - 102rpx)
				.navItem
					position: relative
					height: 60rpx
					line-height: 60rpx
					font-size: 26rpx
					text-align: center
					//父级引用
					&.active::before
						position: absolute
						left: 10rpx
						top: 10rpx
						content:""
						width: 2rpx
						height: 40rpx
						background-color: red
					
		.right
			width: 80%
			height: calc(100vh - 102rpx)
			.contentSrooll
				height: 100%
				.contentImg
					width: 520rpx
					height: 200rpx
					display: block
					margin: 10rpx auto
				.goodsList
					display: flex
					flex-wrap: wrap
					.goodsItem
						width: 33.3%
						height: 200rpx
						.goodsImg
							width: 90%
							height: 140rpx
						.goodsName
							font-size: 26rpx
							text-align: center
					
			
</style>
